<template>
  <section class="data_screen_rg">
    <div class="scroll_auto">
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">健康度趋势分析</span>
        </div>
        <div class="scritm_cont">
          <right-chart-1 ref="refRightChart1" :chart-data="rightChart1Data" />
        </div>
      </div>
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">无线维护指标</span>
        </div>
        <div class="scritm_cont">
          <right-chart-2 ref="refRightChart2" :chart-data="rightChart2Data" />
        </div>
      </div>
      <div class="dt_scrn_item">
        <div class="scritm_title">
          <span class="title">宁波无线投诉</span>
          <span class="time">{{ currentMonth }}</span>
        </div>
        <div class="scritm_cont complaint">
          <div class="data_dot_list inline">
            <ul>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>万投比<b>{{ complaintStatistic.tenThousandComplaintRatio }}</b>%</span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>重复投诉<b>{{ complaintStatistic.repeatedComplaintRate }}</b>%</span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>今日投诉量<b>{{ formatNumber(complaintStatistic.complaintDayCount) }}</b>个</span>
                  </dd>
                </dl>
              </li>
              <li>
                <dl>
                  <dt></dt>
                  <dd>
                    <span>当月投诉<b>{{ formatNumber(complaintStatistic.complaintMonthCount) }}</b>个</span>
                  </dd>
                </dl>
              </li>
            </ul>
          </div>
          <right-chart-3 ref="refRightChart3" :chart-data="rightChart3Data" />
        </div>
      </div>
    </div>
  </section>
</template>

<script setup>
import { ref } from 'vue'
import RightChart1 from '../components/chart/RightChart1.vue';
import RightChart2 from '../components/chart/RightChart2.vue';
import RightChart3 from '../components/chart/RightChart3.vue';
// api相关
import { apiCommon, formatNumber } from '@/utils/index.js'
import * as screenApi from "@/api/screen/screen";
import { queryEomsOrderstatisticsInfo } from '@/api/biz/maintenance';
import { queryComplaintStatistic, queryComplaintCounty, queryComplaintDaily } from '@/api/complain/complain';

const refRightChart1 = ref(null)
const rightChart1Data = ref([])

const refRightChart2 = ref(null)
const rightChart2Data = ref([])

const refRightChart3 = ref(null)
const rightChart3Data = ref([])
const complaintStatistic = ref({})
const currentMonth = ref('')

const dateFormatter = (row, column, cellValue, index) => {
  if (!cellValue) { return }
  // 创建一个新的 Date 对象
  var originalDate = new Date(cellValue);

  // 获取年、月、日、时、分、秒
  var year = originalDate.getFullYear();
  var month = ("0" + (originalDate.getMonth() + 1)).slice(-2);
  var day = ("0" + originalDate.getDate()).slice(-2);
  var hours = ("0" + originalDate.getHours()).slice(-2);
  var minutes = ("0" + originalDate.getMinutes()).slice(-2);
  var seconds = ("0" + originalDate.getSeconds()).slice(-2);

  // 格式化输出
  var formattedDateTimeString = year + "-" + month + "-" + day;
  return formattedDateTimeString;
}

// 健康度趋势分析
const getRightChart1Data = async () => {
  // 获取接口数据接口
  const resDataData = await apiCommon(screenApi.getHealthTrendAnalysis, err => {
    refRightChart1.value.chatLoading("end")
  });

  let data = resDataData.data
  let list = []

  data.forEach(item => {
    let temp = {
      name: dateFormatter(null, null, item.createTime, null),
      healthLevel: item.avgScore
    }
    list.push(temp)
  })

  rightChart1Data.value = list
}

// 无线维护指标
const getRightChart2Data = async () => {
  const resDataData = await apiCommon(queryEomsOrderstatisticsInfo, err => {
    refRightChart2.value.chatLoading("end")
  });
  let data = resDataData.data
  let list = []
  data.forEach(item => {
    if (item.county != '合计') {
      let temp = {
        name: item.county,
        wirelessIndicators: item.exitOrderNum
      }
      list.push(temp)
    }
  })
  rightChart2Data.value = list
}

// 宁波无线投诉
const getRightChart3Data = async () => {
  // 获取接口数据接口  getComplaintInfo
  const resDataData = await apiCommon(queryComplaintCounty, err => {
    refRightChart3.value.chatLoading("end")
  });

  let data = resDataData.data
  let list = []
  data.forEach(item => {
    let temp = {
      name: item.county,
      complaintNum: item.complaintMonthCount
    }
    list.push(temp)
  })
  // 假数据
  rightChart3Data.value = list

}

const getRightChart3Statistic = async () => {
  const resDataData = await apiCommon(queryComplaintStatistic);
  let data = resDataData.data
  complaintStatistic.value = data
}

// 重置图表
const resetChart = () => {
  refRightChart1.value && refRightChart1.value.resetChart()
  refRightChart2.value && refRightChart2.value.resetChart()
  refRightChart3.value && refRightChart3.value.resetChart()
}

function getCurrentMonthFormatted() {
  const now = new Date();
  const year = now.getFullYear();
  const month = now.getMonth() + 1; // getMonth() 返回的是0-11，所以需要加1
  const monthName = month.toString().padStart(2, '0'); // 确保月份是两位数

  // 拼接成所需的格式
  const formattedMonth = `${year}年${month}`;
  return formattedMonth;
}

// 初始化图表数据
const initChartData = () => {
  getRightChart1Data()
  getRightChart2Data()
  getRightChart3Data()
  getRightChart3Statistic()
  currentMonth.value = getCurrentMonthFormatted()
}
initChartData()

/**
 * 暴露方法
 */
defineExpose({
  resetChart
})
</script>

<style lang="scss" scoped>
.data_screen_rg {
  .dt_scrn_item {
    .scritm_cont {
      &.complaint {
        .data_dot_list {
          &.inline {
            ul {
              flex-wrap: wrap;
              margin: 1% auto 0;

              li {
                width: 50%;

                &:not(:nth-child(n+3)) {
                  margin-bottom: .8%;
                }
              }
            }
          }
        }

        .chart_wrap {
          // height: calc(100% - 40px) !important;
        }
      }
    }
  }
}
</style>